import React, { memo, useEffect } from 'react'
import { CategoryListWrapper } from '@/components/b_category_list/style'
import { shallowEqual, useSelector } from 'react-redux'
import moment from 'moment'
import { NavLink } from 'react-router-dom'
import { scrollAnimation } from '@/utils/scroll'

function B_CategoryList(props) {
  const { classify = '' } = props

  const { articleByClassify = [] } = useSelector(
    (state) => ({
      articleByClassify: state.blogReducer.getIn(['articleByClassify'])
    }),
    shallowEqual
  )

  useEffect(() => {
    scrollAnimation(0, window.innerHeight - 20)
    const timer = setTimeout(() => {
      document.title = `分类 | ${classify}`
    }, 300)
    return () => {
      clearTimeout(timer)
    }
  }, [classify])

  return (
    <CategoryListWrapper>
      <h2 className="text-bolder base-color fs-6">
        {classify}
        <strong className="fs-3 ml-2">分类</strong>
      </h2>
      <ul className="pt-5 list">
        {articleByClassify.length > 0 &&
          articleByClassify.map((item) => {
            return (
              <li key={item.id} className="py-4">
                <span className="fs-1 timer">
                  {moment(item.createTime).format('YYYY/MM/DD')}
                </span>
                <NavLink
                  to={`/blog/detail?id=${item.id}`}
                  className="title pl-5 fs-3"
                >
                  {item.title}
                </NavLink>
              </li>
            )
          })}
      </ul>
    </CategoryListWrapper>
  )
}

export default memo(B_CategoryList)
